import React from 'react';
import {
  Input,
  Select,
  Form,
  Checkbox,
  DatePicker,
  Cascader,
  Button,
  Radio,
  TreeSelect,
  Drawer,
  Col,
  InputNumber
} from 'antd';
import * as Utils from "../../utils/action";

// drawer 新增修改抽屉 type：控件的类型 label:标签名  list:下拉框的值 name：下拉框显示的字段 field:Form表单的key 对应查询接口的参数名
// valueField:下拉框取值的字段 required:代表是否必填 col: 单个控件显示的长度 默认为6  showTime:日期控件是否显示时分秒
// initialValue:初始化表单的值 日期范围控件命名方式: frame_开始时间参数_结束时间参数  单个日期控件命名方式 :date_sendDate
// import config from "../../config";

const { TextArea } = Input;
const { RangePicker, MonthPicker } = DatePicker;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;

class BasicModal extends React.Component {
  state = {
    showIcon: true,
    fileList: []
  };

  componentDidMount() {
    this.props.onRef(this);
  }

  reset = () => {
    const p = this;
    p.props.form.resetFields();
  };

  handleAdd = () => {
    const p = this;
    p.props.handleOpenModal('add');
  };

  pitchDelete = () => {
    const p = this;
    p.props.pitchDelete();
  };

  onChange = () => { };

  onTreeChange = () => { };

  initFormList = () => {
    const p = this;
    const { getFieldDecorator } = p.props.form;
    const { drawerFormList, detail } = this.props;


    const formItemList = [];
    if (drawerFormList && drawerFormList.length > 0) {
      drawerFormList.forEach(item => {
        const { label } = item;
        const { field } = item;
        const { tree } = item;
        const { rules } = item;
        const { dom } = item;
        const { required } = item;
        const rulesType = required ? [{ required: true, message: `${label}必填` }] : false;
        const initialValue = item.initialValue || undefined;
        const frame = [];
        let showAdd = false;
        // if(initialValue&&initialValue instanceof Array){
        //     if(initialValue.length===1&&this.state.fileList&&this.state.fileList.length===0&&!this.state.showIcon)showAdd=true
        //     if(initialValue.length===0&&this.state.fileList&&this.state.fileList.length===0)showAdd=true
        // }

        //时间范围选择器
        if (initialValue && initialValue instanceof Array) {
          initialValue.map(item => {
            frame.push(Utils.getDateByString(item))
          })
        }

        const { placeholder } = item;

        const { style } = item;
        const { name, valueField, showTime } = item;
        const { disabled } = item;
        const formItemLayout = {
          labelAlign: 'left',
          labelCol: {
            xs: { span: 24 },
            sm: { span: 6 },
          },
          wrapperCol: {
            xs: { span: 24 },
            sm: { span: 16 },
          },
        };
        if (item.type === 'TIMEFRAME') {
          const timeFrame = (
            <FormItem label={label} key={field} {...formItemLayout}>
              {getFieldDecorator(`${field}`, {
                initialValue: frame
              })(
                <RangePicker
                  style={{ width: '100%' }}
                  showTime={showTime ? true : false}
                  placeholder="起始日期"
                  format={showTime ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD"}
                />
              )}
              {dom}
            </FormItem>
          );
          formItemList.push(timeFrame);

        } else if (item.type === "DATE") {
          const date = (
            <FormItem label={label} key={field} {...formItemLayout}>
              {getFieldDecorator(`${field}`, {
                initialValue: Utils.getDateByString(initialValue)
              })(
                <DatePicker
                  style={{ width: '100%' }}
                  showTime={showTime ? true : false}
                  format={showTime ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD"}
                />
              )}
            </FormItem>
          );
          formItemList.push(date);
        } else if (item.type === 'INPUT') {
          const INPUT = (
            <FormItem label={label} key={field}  {...formItemLayout}>
              {getFieldDecorator(`${field}`, {
                rules: rulesType,
                initialValue,
              })(
                <Input type="text" placeholder={`请输入${label}`} />)}
              {dom}
            </FormItem>
          );
          formItemList.push(INPUT);
        }
        else if (item.type === "NUMBERFRAME") {
          let arr = field.split('_');
          const number = (
            <Col span={24}>
              <Col span={12}>
                <FormItem label={label} key={field} >
                  {getFieldDecorator(`${arr[1]}`)(
                    <InputNumber style={{ width: '100%' }} placeholder='最高数量' />
                  )}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem key={field} >
                  {getFieldDecorator(`${arr[2]}`)(
                    <InputNumber style={{ width: '100%' }} placeholder='最低数量' max={p.props.form.getFieldValue(arr[1]) ? p.props.form.getFieldValue(arr[1]) : Infinity} />
                  )}
                </FormItem>
              </Col>

            </Col>
          );
          formItemList.push(number);
        }
        else if (item.type === "MONTHDATE") {
          const month = (
            <FormItem label={label} key={field} style={style} {...formItemLayout}>
              {getFieldDecorator(`${field}`, {
                rules: rulesType,
                initialValue,
              })(<MonthPicker
                placeholder={`请选择${label}`}
                style={{ width: '100%' }}
                showTime={showTime ? true : false}
              />
              )}
            </FormItem>
          );
          formItemList.push(month);
        }
        else if (item.type === 'TEXTAREA') {
          const TEXTAREA = (
            <FormItem label={label} key={field} style={style} {...formItemLayout}>
              {getFieldDecorator(`${field}`, {
                rules: rulesType,
                initialValue,
              })(
                <TextArea
                  autosize={{ minRows: 5 }}
                />
              )
              }
              {dom}
            </FormItem>
          );
          formItemList.push(TEXTAREA);
        } else if (item.type === 'SELECT') {
          const SELECT = (
            <FormItem label={label} key={field} {...formItemLayout}>
              {getFieldDecorator(`${field}`, {
                initialValue, // true | false
                rules: rulesType,
              })(
                <Select placeholder={'请选择' + label}
                  showSearch
                  allowClear
                  filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }
                >
                  {Utils.getOptionList(item.list, name, valueField)}
                </Select>
              )}
            </FormItem>
          );
          formItemList.push(SELECT);
        } else if (item.type === 'TREESELECT') {
          const REDIO = (
            <FormItem label={label} key={field} {...formItemLayout}>
              {getFieldDecorator(`${field}`, {
                rules: [{ required: true, message: `${label}必填` }],
                initialValue,
              })(
                <TreeSelect
                  onChange={this.onTreeChange}
                  treeData={tree}
                  placeholder={placeholder}
                  showCheckedStrategy="SHOW_PARENT"
                  searchPlaceholder={initialValue}
                  treeCheckable
                  showCheckedStrategy="SHOW_PARENT"
                  searchPlaceholder="Please select"
                />
              )}
            </FormItem>
          );
          formItemList.push(REDIO);
        } else if (item.type === 'REDIO') {
          const REDIO = (
            <FormItem label={label} key={field} {...formItemLayout}>
              {getFieldDecorator(`${field}`, {
                rules: [{ required: true, message: `${label}必填` }],
                initialValue: initialValue || 0,
              })(
                <RadioGroup onChange={this.onChange} placeholder={placeholder}>
                  {Utils.getRadioList(item.list, name)}
                </RadioGroup>
              )}
            </FormItem>
          );
          formItemList.push(REDIO);
        } else if (item.type === 'CHECKBOX') {
          const CHECKBOX = (
            <FormItem label={label} key={field} {...formItemLayout}>
              {getFieldDecorator(`${field}`, {
                valuePropName: 'checked',
                initialValue, // true | false
              })(<Checkbox>{label}</Checkbox>)}
            </FormItem>
          );
          formItemList.push(CHECKBOX);
        } else if (item.type === 'CASCADER') {
          const CASCADER = (
            <FormItem label={label} key={field} {...formItemLayout}>
              {getFieldDecorator(`${field}`, {
                initialValue, // true | false
              })(
                <Cascader

                  placeholder={placeholder}
                  allowClear
                  options={tree}
                  expandTrigger="hover"
                />
              )}
            </FormItem>
          );
          formItemList.push(CASCADER);
        }
      });
    }
    return formItemList;
  };

  closeModal = () => {
    const p = this;
    const { onClose } = p.props;
    // form.resetFields();
    onClose();
  };

  handleSubmit = () => {
    const p = this;
    const { form } = this.props;
    form.validateFieldsAndScroll((err, fieldsValue) => {
      if (err) {
        return;
      }
      for (var key in fieldsValue) {
        //时间范围选择器
        if (key.indexOf("frame_") === 0) {
          if (fieldsValue[key] && fieldsValue[key].length) {
            let arr = key.split('_');
            fieldsValue[arr[1]] = Utils.getDate(fieldsValue[key][0])
            fieldsValue[arr[2]] = Utils.getDate(fieldsValue[key][1])
          }
          delete fieldsValue[key];
        }
        //单个时间选择器
        if (key.indexOf("date_") === 0) {
          if (fieldsValue[key]) {
            let arr = key.split('_');
            fieldsValue[arr[1]] = Utils.getDate(fieldsValue[key])
          }
          delete fieldsValue[key];
        }

        //月选择器
        if (key.indexOf("month_") === 0) {
          if (fieldsValue[key]) {
            let arr = key.split('_');
            fieldsValue[arr[1]] = Utils.getStringByDate(fieldsValue[key], 'YYYY-MM')
          }
          delete fieldsValue[key];
        }
      }
      p.props.submit(fieldsValue);
    });
  };

  render() {
    const p = this;
    const { visible, title, detail, width } = this.props;
    const modalProps = {
      title,
      visible,
      width,
      onClose() {
        p.closeModal();
      },
    };

    return (
      <Drawer {...modalProps}>
        <Form layout="horizontal">
          {p.initFormList()}
        </Form>
        <div style={{ position: 'absolute', right: 0, bottom: 0, width: '100%', borderTop: '1px solid #e9e9e9', padding: '10px 16px', background: '#fff', textAlign: 'right' }}>
          <Button type='primary' onClick={this.handleSubmit} style={{ marginRight: 8 }}>
            保存
          </Button>
          <Button onClick={() => p.closeModal()} style={{ marginRight: 8 }}>
            关闭
          </Button>
        </div>
      </Drawer>
    );
  }
}
export default Form.create({})(BasicModal);
